<template>
    <div class="topbar">
        <!-- 版心 -->
        <div class="wrap">
            <div class="topbarwrap">
                <div class="left">欢迎来到积分商城</div>
                <ul class="right">
                    <li>
                        <img src="../assets/img/userImg.f8bbec5e.png" alt="用户头像">用户名：游客
                    </li>
                    <li>我的积分：0</li>
                    <li>获取积分</li>
                    <li>商城官网</li>
                    <li class="car-btn">
                        <img src="../assets/img/cart.png" alt="">
                        <span>购物车</span>
                        <strong>...</strong>
                    </li>
                    <li class="loginBtn" @click="changeIsShowLoginModal(true)">登录</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { mapMutations } from 'vuex';

export default {
    methods: {
        ...mapMutations({ changeIsShowLoginModal: "showModal/changeIsShowLoginModal" })
    }
}
</script>

<style lang="less" scoped>
.topbar {
    height: 40px;
    line-height: 40px;
    background: #242b39;
    font-style: 14px;
    font-weight: 300;
    color: #fffefe;

    .wrap {
        width: 1200px;
        margin: 0 auto;
    }

    .topbarwrap {
        display: flex;
        justify-content: space-between;

        .right {
            display: flex;
            list-style: none;

            li {
                cursor: pointer;
                padding: 0 10px;
                text-align: center;

                img {
                    width: 26px;
                    height: 26px;
                    vertical-align: middle;
                    border-radius: 50%;
                }

                &.loginBtn {
                    width: 124px;
                    height: 40px;
                    background: #0a328e;
                }

                &.cart-btn {
                    width: 124px;
                    height: 40px;
                    background: #0a328e;
                    text-align: center;

                    img {
                        width: 20px;
                        height: 19px;
                        vertical-align: middle;
                    }

                    span {
                        margin: 0 8px;
                    }

                    strong {
                        width: 22px;
                        height: 22px;
                        line-height: 22px;
                        display: inline-block;
                        border-radius: 50%;
                        background-color: #fd604d;
                    }
                }
            }
        }
    }
}
</style>